<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
      <div class="pc-page-header">
        <el-form-item>
          <el-date-picker class="block"
                          v-model="dataQueryForm.createdTime"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="委托发起开始日期"
                          end-placeholder="委托发起结束日期"
                          value-format="yyyy-MM-dd"
                          @change="getDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('dataQueryForm')">刷新</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!--列表数据-->
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>

    <!--分页组件-->
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

    <!--项目详情页面-->
    <pc-dialog :is-show="isShowDetailDialog" title='项目详情' @on-close="isShowDetailDialog = false" width="1400">
      <div>
        <detail :projectInfo="projectInfo">
        </detail>
      </div>
    </pc-dialog>

    <!--用户详情页面-->
    <pc-dialog :is-show="isShowUserDialog" title='用户详情' @on-close="isShowUserDialog = false">
      <div>
        <user-info :userId="userId">
        </user-info>
      </div>
    </pc-dialog>

    <!--企业详情页面-->
    <pc-dialog :is-show="isShowCompanyDialog" title='企业详情' @on-close="isShowCompanyDialog = false">
      <div>
        <company-info :companyId="companyId">
        </company-info>
      </div>
    </pc-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import Detail from '../assetManage/detail.vue';
  import UserInfo from './userInfo.vue';
  import CompanyInfo from './companyInfo.vue';
  let that;

  // 项目编码链接详情
  var projectNoLink = {
    template: ` <el-button class="base-project-no" @click="viewdetail(row)" type="text" size="small">{{this.row.projectNo}}</el-button>`,
    props: ['row'],
    methods: {
      viewdetail(val) {
        this.$emit('view-detail', val);
      }
    }
  };

  // 用户名称链接详情
  var userNameLink = {
    template: ` <el-button class="base-project-no" @click="viewdetail(row)" type="text" size="small">{{this.row.userName}}</el-button>`,
    props: ['row'],
    methods: {
      viewdetail(val) {
        this.$emit('view-user-info', val);
      }
    }
  };

  // 企业名称链接详情
  var companyNameLink = {
    template: ` <el-button class="base-project-no" @click="viewdetail(row)" type="text" size="small">{{this.row.companyName}}</el-button>`,
    props: ['row'],
    methods: {
      viewdetail(val) {
        this.$emit('view-company-info', val);
      }
    }
  };

  export default {
    data() {
      return {
        projectInfo: null,
        userId: null,
        companyId: null,
        isShowDetailDialog: false,
        isShowUserDialog: false,
        isShowCompanyDialog: false,
        dataQueryForm: {
          createdTime: null,
          startDate: null,
          endDate: null
        },
        tableData: [],
        columns: [
          {
            label: '委托编号',
            prop: 'entrustNo'
          },
          {
            label: '委托发起时间',
            prop: 'createdTime'
          },
          {
            label: '用户名称',
            // prop: 'userName'
            component: userNameLink,
            listeners: {
              'view-user-info' (val) {
                that.viewUserInfoFn(val);
              }
            }
          },
          {
            label: '用户联系电话',
            prop: 'userContactMobileNo'
          },
          {
            label: '企业名称',
            // prop: 'companyName'
            component: companyNameLink,
            listeners: {
              'view-company-info' (val) {
                that.viewCompanyInfoFn(val);
              }
            }
          },
          {
            label: '企业联系电话',
            prop: 'companyTelNo'
          },
          {
            label: '项目编号',
            // prop: 'projectNo'
            component: projectNoLink,
            listeners: {
              'view-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          }
        ],
        columnsSchema: {
          '委托编号': {minWidth: 100},
          '委托发起时间': {minWidth: 120},
          '用户名称': {minWidth: 120},
          '用户联系电话': {minWidth: 120},
          '企业名称': {minWidth: 200},
          '企业联系电话': {minWidth: 120},
          '项目编号': {minWidth: 100}
        },
        selecetedRows: [],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 150,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/malisk/server/project/queryEntrustList'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Detail, UserInfo, CompanyInfo
    },
    created() {
      that = this;
    },

    methods: {
      getDate() {
        if (this.dataQueryForm.createdTime === null) {
          this.dataQueryForm.startDate = '';
          this.dataQueryForm.endDate = '';
        } else {
          this.dataQueryForm.startDate = this.dataQueryForm.createdTime[0];
          this.dataQueryForm.endDate = this.dataQueryForm.createdTime[1];
        }
      },
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      viewDetailFn (scopeRow) {
        this.projectInfo = scopeRow;
        this.isShowDetailDialog = true;
      },
      viewUserInfoFn (scopeRow) {
        this.userId = scopeRow.userId;
        this.isShowUserDialog = true;
      },
      viewCompanyInfoFn (scopeRow) {
        this.companyId = scopeRow.companyId;
        this.isShowCompanyDialog = true;
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      },
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.dataQueryForm.createdTime = null;
        this.dataQueryForm.startDate = null;
        this.dataQueryForm.endDate = null;
        this.queryDataFn();
      }
    }
  };
</script>
<style>
  .base-project-no {
    padding: 5px 0px !important;
  }
</style>
